<template>
  <el-container class="friends_tas">
    <el-main>
      <el-card shadow="never" class="selectCard searchColumn">
        <el-form label-position="right" label-width="6rem">
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="客户昵称：">
                <el-input v-model="searchParams.name" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="接待人员：">
                <el-input v-model="searchParams.name" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="float: right;">
              <search-button :default-params="searchParams" @refreshParams="refreshParams" @getList="getList1" />
            </el-col>
          </el-row>

        </el-form>
      </el-card>
      <el-card shadow="never" class="commercia-tenant-list-title tableCard">
        <vxe-toolbar>
          <template v-slot:buttons>
            <vxe-button class="tool-btn" type="text" size="small" icon="el-icon-download" @click="syncKfFriendsMessageFromWx()">刷新数据</vxe-button>
          </template>
          <template v-slot:tools>
            <vxe-button class="tool-btn" type="text" size="small" icon="el-icon-refresh" @click="getList()">刷新</vxe-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="xTable"
          border
          resizable
          show-overflow
          highlight-hover-row
          :loading="loading"
          :auto-resize="true"
          :data="activitiesList"
          width
          max-height="420"
          :print-config="{}"
          header-align="center"
        >
          <vxe-table-column type="seq" align="center" width="50" title=" " />
          <vxe-table-column field="name" title="客户昵称" min-width="220" />
          <vxe-table-column field="name" title="接待人员" min-width="220" />
          <vxe-table-column field="name" title="接待时间" min-width="220" />
        </vxe-table>
        <vxe-pager
          :current-page.sync="pageNum"
          :page-size.sync="pageSize"
          :total="total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="getList()"
        />
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import { syncKfFriendsMessageFromWxcp, getKfFriendsMessagePageList } from '@/api/cop/kfService'
import SearchButton from '@/components/SearchButton'
export default {
  components: {
    SearchButton
  },
  data() {
    return {
      activitiesList: [],
      loading: false,
      searchParams: {
        name: ''
      },
      pageNum: 1,
      pageSize: 20,
      total: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    refreshParams(params) {
      this.searchParams = params
    },
    syncKfFriendsMessageFromWx() {
      this.$confirm('确定要从企业微信同步客户信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning'
      }).then(() => {
        syncKfFriendsMessageFromWxcp().then(res => {
          if (res) {
            this.$alert('正在从企业微信同步客户信息，请稍候刷新！', '消息提示', { confirmButtonText: '我知道了', center: true, callback: action => {} })
            this.$nextTick(() => {
              this.getList()
            })
          }
        })
      }).catch(() => {
        this.$message.info('取消操作')
      })
    },
    getList() {
      getKfFriendsMessagePageList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ... this.searchParams
      }).then(response => {
        if (response) {
          this.activitiesList = response.records
          this.total = response.total
        }
      })
    }
  }
}
</script>

<style lang="scss">
.friends_tas {

}
</style>
